<template>
  <div class="box">
        <div class="uplaodBox">
            <div class="header">
                <n-button @click="uploadLoading">
                    上传图片
                </n-button>
                <n-button type="primary" @click="addGroup">
                    创建文件
                </n-button>
                <n-button v-if="imageList.length" type="error" @click="deleteShowTag">
                    删除
                </n-button>
                <n-button v-if="type == '1'" type="info" @click.stop="selectImageFun">
                    选中{{selectImageList.length}}图片
                </n-button>
            </div>
            <div class="button">
                <div class="left">
                    <n-layout has-sider>
                        <n-layout-sider
                            bordered
                            collapse-mode="width"
                            :collapsed-width="84"
                            :width="160"
                            >
                        <n-menu
                            @update:value="selectGroup"
                            :default-value="defaultValue"
                            :collapsed-width="64"
                            :collapsed-icon-size="22"
                            :options="groupList"
                            key-field="id"
                            label-field="name"
                        />
                        </n-layout-sider>
                        <n-layout />
                    </n-layout>
                </div>

                <div class="right">
                    <div class="right-image">
                        <div v-if="deleteShow && imageList.length" v-for="item in imageList" class="imageBox1">
                            <div style="height:135px;width:100px;overflow: hidden;display: flex;padding:12px;border: 1px solid #eee;
                                        justify-content: center; align-items: center;">
                                <n-image
                                    :preview-disabled="type=='1'?true:false"
                                    style="object-fit: contain;display: flex;
                                        justify-content: center;
                                        align-items: center;"
                                    :src="Https()+item.url"/>
                            </div>
                            <n-popconfirm :show-icon="false" @positive-click="deleteImage(item)">
                                <template #trigger>
                                    <div class="deleteClass">
                                            <n-icon size="22">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z" fill="currentColor"></path></svg>
                                        </n-icon>
                                    </div>
                                </template>
                                我要删了它
                            </n-popconfirm>
                            
                        </div>
                        <div v-else-if="imageList.length" v-for="item in imageList" :class="type == '1'?'imageBox1':'imageBox'">
                            <n-checkbox-group v-if="type == '1'" v-model:value="selectImageList">
                               <div style="height:100px;width:100px;">
                                    <n-checkbox :value="item.url">
                                        <img :src="Https()+item.url" alt="" style="object-fit: contain;width:100px;height:100px;border: 1px solid #eee;">
                                    </n-checkbox>
                               </div>
                            </n-checkbox-group>
                            <div  v-else style="height:135px;width:100px;overflow: hidden;display: flex;padding:12px;
                                        justify-content: center; align-items: center;">
                                <n-image
                                :preview-disabled="type=='1'?true:false"
                                style="object-fit: contain;display: flex;
                                    justify-content: center;
                                    align-items: center;"
                                :src="Https()+item.url"/>
                            </div>
                        </div>
                    </div>
                     <div class="pagination" v-if="imageList.length">
                        <div>共{{total}}条数据</div>
                        <div>
                        <n-pagination
                        v-model:page="imageData.pageNum"
                        v-model:page-size="imageData.pageSize"
                        :item-count="total"
                        show-size-picker
                         :page-slot="8"
                         size="medium"
                        :page-sizes="pageSizes"
                        :on-update:page="pageNext"
                        :on-update:page-size="sizeNext"
                        />
                        </div>
                    </div>
                </div>
                 <div class="message" v-if="imageList.length == 0">
                    <n-empty size="large" description="该目录没有图片">
                        <template #extra>
                        <n-button size="small" @click="showModalImage=true">
                            上传图片
                        </n-button>
                        </template>
                    </n-empty>
                </div>
            </div>
        </div>
        <n-modal v-model:show="showModalImage">
            <n-card
            style="width: 600px"
            title="上传图片"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
            >
            <n-upload
                action="http://122.152.228.217:9090/basic-api/uploading"
                :default-file-list="previewFileList"
                list-type="image-card"
                multiple
                
                :data="{
                    file_manage_id:imageData.file_manage_id
                }"
                @preview="handlePreview"
                @finish="finishImage"
                :headers="{
                    Authorization:token
                }"
            />
            <template #footer>
                <div class="ModalFooter" >
                    <n-button @click="showModalImage=false">
                        取消
                    </n-button>
                    <n-button type="primary" @click="showModalImage=false">
                        确定
                    </n-button>
                </div>
            </template>
            </n-card>
        </n-modal>
        <n-modal v-model:show="showModal">
            <n-card
                style="width: 600px"
                title="创建文件夹"
                :bordered="false"
                size="huge"
                role="dialog"
                aria-modal="true"
            >
            <n-form ref="formRef" :model="groupData" :rules="rules">
                <n-form-item path="name" label="文件夹名称">
                    <n-input v-model:value="groupData.name" />
                </n-form-item>
            </n-form>
            <template #footer>
                <div class="ModalFooter" >
                    <n-button @click="showModal=false">
                        取消
                    </n-button>
                    <n-button type="primary" @click="addGroupShot">
                        确定
                    </n-button>
                </div>
            </template>
            </n-card>
        </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import type { UploadFileInfo,MenuOption,NIcon   } from 'naive-ui'
import { useAuthStore } from '@/store'
import api from './api'
import { Https,setPagination } from "@/utils"
import {
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon
} from '@vicons/ionicons5'
const previewFileList= ref([])
const authStore = useAuthStore()
const token = ref('')
const showModal = ref(false)
const showModalImage = ref(false)
const collapsed = ref(false)
const defaultValue = ref('0')
const selectImageList = ref([])
const deleteShow = ref(false)
const total = ref(0)

const props = defineProps({
  type: {
    type: String,
    default: '0',
  },
   
})

const groupData = ref({
    name:'',
    type:'pc',
    other:''
})
const imageData = ref({
    pageSize:20,
    pageNum:1,
    file_manage_id:''
})

function sizeNext(size){
    imageData.value.pageNum = 1
    imageData.value.pageSize = size
    getImage();
}

const pageSizes = [
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '50 每页',
    value: 50
  },
  {
    label: '100 每页',
    value: 100
  },
  {
    label: '150 每页',
    value: 150
  }
]
const handlePreview = (file) =>{
    console.log(file)
}
const finishImage = (file) =>{
    getImage()
}
function pageNext(page){
  imageData.value.pageNum = page
  getImage();
}

const rules: FormRules = {
    name: [
        {
            required: true,
            message: '请输入文件夹名称'
        }
    ],
}
const imageList = ref([])
const groupList = ref([])
async function getImage() {
    const res = await api.getImageApi(imageData.value)
    if(res.code == 200){
        imageList.value = res.data.list
        total.value = res.data.total
    }
}
async function filemanage_group_list() {
    const res = await api.filemanage_group_listApi()
    if(res.code == 200){
        groupList.value = []
        groupList.value.push({
            id:'0',
            name:'全部'
        })
        groupList.value.push(...res.data.list)
    }
}

const selectGroup = (key,item) =>{
    imageData.value.file_manage_id = key
    getImage();
    // console.log(key,item)
}

const addGroup = () =>{
    showModal.value = true
}

async function addGroupShot() {
    const res = await api.filemanage_group_addApi(groupData.value)
    if(res.code == 200){
        $message.success('添加成功!')
        filemanage_group_list();
        getImage();
         showModal.value = false;
    }
}

async function deleteImage(item) {
    const res = await api.ImageDelApi({
        ids:String(item.id)
    })
    if(res.code == 200){
        $message.success('删除成功!')
        getImage();
    }
}

const deleteShowTag = () =>{
    deleteShow.value = !deleteShow.value
}

const uploadLoading = () =>{
    showModalImage.value = true
}
const emit = defineEmits(['selectImage'])
const selectImageFun = () =>{

    emit('selectImage',selectImageList.value);

}


onMounted(()=>{
    token.value = authStore.token
    getImage();
    filemanage_group_list();
    console.log(props.type)
})

</script>

<style lang="scss" scoped>
    .box{
    //     position: relative;
        height: 100vh;
        width: 100%;
    //     background: #eee;
    //     display: flex;
    //     /* top: 45px; */
    //     /* align-items: center; */
    //     justify-content: center;
    }
    .uplaodBox{
        // top: 30px;
        background: white;
        height: 750px;
        width: 95%;
        display: flex;
        justify-content:center;
        /* align-items: center; */
        position: relative;
        flex-direction: column;
        /* left: 100px; */

    }
    .header{
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 20px;
        position: relative;
        bottom: 5px;

    }
    .button{
        height: 650px;
        width: 100%;
        display: flex;
        /* background: yellow; */
    }
    .left{
        height: 650px;
        /* overflow-y: scroll; */
    }
    .right{
        width: 100%;
        height: 460px;
        // background: red;
        
    }
    .right-image{
        width: 100%;
        position: relative;
        left: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
        gap: 10px;
        grid-auto-rows: 140px;
        padding: 20px;
       
    }
    .imageBox{
        width: 100px;
        height: 140px;
        border: 1px solid #eee;
        // border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .imageBox1{
        width: 100px;
        height: 140px;
        // border: 1px solid #eee;
        // border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .ModalFooter{
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    .checkboxRight{
        position: relative;
    }
    .deleteClass{
        color: red;
        position: relative;
        font-weight: 700;
        bottom: 55px;
        right: 20px;
        // left: 78px;
    }
    .message{
        width: 100%;
           
    }
    .paginationClass{
        // position: relative;
        // top: 450px;
    }
    .pagination{
        display: flex;
        justify-content: right;
        gap: 10px;
        align-items: center;
        position: relative;
        right: 70px;
        top: 20px;
        
    }
</style>